<template>
  <div>
      <el-card style="margin-bottom:20px">      
        <CategorySelector @changeCategoryId="changeCategoryId" ref="cs"/>
     </el-card>
    <el-card >
        <!-- spu列表的界面 -->
        <div v-show="!isShowSpuForm && !isShowSkuForm">      
         <!-- 添加SPU按钮 -->
          <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="showAddSpuForm">添加SPU</el-button> 
          <el-table :data="spuInfoList" border stripe style="width: 100%" v-loading="loading">
                <el-table-column  type="index"   label="序号"  width="80" align="center"></el-table-column>
            <el-table-column  prop="spuName" label="SPU名称"></el-table-column>
            <el-table-column  prop="description" label="SPU描述" ></el-table-column>
            <el-table-column   label="操作">
                <template slot-scope="{row}">
                  <HintButton title="添加SKU" size="mini"  type="primary" icon="el-icon-plus" @click="showAddSkuForm(row)"/>&nbsp;
                  <HintButton title="修改SPU" size="mini"  type="primary" icon="el-icon-edit" @click="showUpdateSpuForm(row.id)"/>&nbsp;
                  <HintButton title="查看SKU" size="mini"  type="info" icon="el-icon-info" @click="showSkuInfoList(row)"/>&nbsp;                         
                    <el-popconfirm style="margin-left:10px" :title="`您确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row.id)">
                      <HintButton title="删除SPU" size="mini"  type="danger" icon="el-icon-delete" slot="reference"/>
                    </el-popconfirm>                    
                </template> 
            </el-table-column>
           </el-table> 
           <!-- 分页器 -->
           <div class="block" style="textAlign:center">
            <span class="demonstration"></span>
            <el-pagination 
            :current-page="page"
            :page-sizes="[3, 6, 9, 12]"  
            :page-size="limit"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @size-change="handleSizeChange" @curationchange="getSpuInfoList">
            </el-pagination>
           </div>
        </div> 
        <!-- 增加或修改spu数的界面 -->
        <SpuForm :visible.sync="isShowSpuForm" ref="spuForm" @saveSuccess="saveSuccess"/>
        <!-- 增加或修改sku数的界面 -->
        <SkuForm v-show="isShowSkuForm" ref="skuForm" @saveSuccess="saveSuccess" @cancel="isShowSkuForm=false"/>
    </el-card> 
     <!--对话框显示spu对象的sku列表数  -->
     <el-dialog :title="`${spuName}=> SKU列表`" :visible.sync="dialogTableVisible">
        <el-table :data="skuInfoList">
            <el-table-column property="skuName" label="名称" width="190"></el-table-column>
            <el-table-column property="price" label="价格（元）"></el-table-column>
            <el-table-column property="weight" label="重量（KG）"></el-table-column>
            <el-table-column label="默认图片" >
               <template slot-scope="{row}">
                   <img :src="row.skuDefaultImg" width="100" height="100"/> 
               </template>>
            </el-table-column>
        </el-table>
     </el-dialog>
  </div>
</template>

<script>
import SpuForm from'@/views/product/components/SpuForm.vue'
import SkuForm from'@/views/product/components/SkuForm.vue'
  export default {
      name:'Spu',
      components:{
          SpuForm,
          SkuForm
      },
      data() {
        return {
           category1Id:'',//一级分类id
           category2Id:'',//二级分类id
           category3Id:'',//三级分类id
           spuInfoList:[],//spuInfo对象的列表数组数据
           page:1,//默认的页面
           limit:3,//每页的数据条数
           total:0,//总条数
           loading:false,//加载数据的标识
           isShowSpuForm:false,//是否显示SpuForm界面的标识
           spuId:'',//当前要修改spuInfo对象的id值
           isShowSkuForm:false, //是否显示skuForm界面的标识
           spuName:'',//用来存储spu名字的属性
           dialogTableVisible:false,//用来控制当前的对话框显示和隐藏的标识
           skuInfoList:[]//sku列表数据数组
        }
      },
      methods: {
          //三级分类组件需要分发的事件
           changeCategoryId({level,categoryId}){
               //判断分类级别
               if(level==1){
                //一级分类
                this.category1Id = categoryId
                //重置二，三级分类的id和平台属性数组
                this.category2Id = null
                this.category3Id = null
                this.totail = 0
                this.spuInfoList = []                
               }else if(level==2){ 
                   //二级分类
                this.category2Id = categoryId
                this.category3Id = null
                this.totail = 0
                this.spuInfoList = []      
               }else{
                   //三级分类
                   this.category3Id = categoryId
                   //获取spuInfo的列表数据
                   this.getSpuInfoList()
               }
          },
          //获取spuInfo的列表数据
          async getSpuInfoList(page = 1){
              this.page = page
              const result = await this.$API.spu.getSpuInfoList(
                  page,this.limit,this.category3Id
              )
              if(result.code!==200){
                  this.$message.error('获取SPU的列表数据失败了')
                  return
              }
              //更新数据
              const {records,total} = result.data
              this.total = total
              this.spuInfoList = records
          },
          //删除回调函数
           async deleteSpu(spuId){
             try{
                await this.$API.spu.deleteSpuInfoById(spuId)
                this.$message.success('操作成功')
                this.getSpuInfoList(
                    this.page > 1 
                    ? this.spuInfoList.length==1
                        ?this.page - 1
                        :this.page
                    :1
                )
             }catch(error){
                this.$message.error(error.message||'操作失败')
             }
          },
          //分页组件所需要的回调函数
          handleSizeChange(limit){
              this.limit = limit//改变每一页所显示条数
              this.getSpuInfoList()//重新获取当前的列表数据
          },
          //点击修改spu的按钮的事件的回调函数
          showUpdateSpuForm(spuId){
              //存储spuId
              this.spuId = spuId
              //设置当前的SpuForm的界面显示出来
              this.isShowSpuForm = true
              //需要向SpuForm组件中传递数据spuId
              //通过spuForm组件对象调用自己的方法的方式向自己组件中传递数据 ----ref
              this.$refs.spuForm.initUpdateData(this.spuId)

          },
          //添加或修改spuInfo数据成功后的回调
          saveSuccess(){
              //
              if(this.spuId){
                this.getSpuInfoList(this.page)
                this.spuId = ''
              }else{
                  //点击添加按钮进入spuForm界面
                  this.getSpuInfoList()
              }
          },
          //点击按钮，添加spuInfo对象
          showAddSpuForm(){
            //显示对话框
            this.isShowSpuForm = true
            //显示SpuForm界面
            this.$refs.spuForm.initAddData(this.category3Id)
          },         
           //点击添加sku按钮，对应的回调函数
          showAddSkuForm(spuInfo){
              //显示skuForm界面
            this.isShowSkuForm = true
            //获取spuId,spuid，tmId，一级，二级，三级分类的id
            spuInfo={
                ...spuInfo,
                category1Id:this.category1Id,
                category2Id:this.category2Id,
            }
            
            //调用skuFrom组件中相关方法进行数据初始化，同时传递数据
            this.$refs.skuForm.initAddData(spuInfo)
          },
          //根据spuId获取对应的sku列表数据
          async showSkuInfoList(spuInfo){
                 console.log(spuInfo)
           //保存spu名字
           this.spuName = spuInfo.spuName
            //显示对话框
            this.dialogTableVisible = true
            //调用接口
            const result = await this.$API.sku.getSkuInfoListByspuId(spuInfo.id)
            //保存数据
            this.skuInfoList = result.data
          }
      },
  }
</script>

<style scoped>
  
</style>